<template>
  <div>
    <el-card class="box-card">
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="114px"
        label-position="top"
      >
        <el-row :gutter="15">
          <el-col :span="7">
            <el-form-item label="姓名" filterable prop="oldManId">
              <el-select
                v-model="formData.oldManId"
                placeholder="请选择姓名"
                clearable
                :style="{ width: '100%' }"
                @change="userChange"
              >
                <el-option
                  v-for="dict in userList"
                  :key="dict.id"
                  :label="dict.name"
                  :value="dict.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="老人编号" prop="oldManNumber">
              <el-input
                v-model="formData.oldManNumber"
                placeholder="请输入老人编号"
                :disabled="true"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="联系方式" prop="phone">
              <el-input
                v-model="formData.phone"
                placeholder="请输入联系方式"
                :disabled="true"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="7">
            <el-form-item label="证件类型" prop="certificateType">
              <el-select
                v-model="formData.certificateType"
                placeholder="请选择证件类型"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="dict in dict.type.user_documents_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="证件号码" prop="idNumber">
              <el-input
                v-model="formData.idNumber"
                placeholder="请输入证件号码"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="出生年月" prop="dateBirth">
              <el-date-picker
                v-model="formData.dateBirth"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :style="{ width: '100%' }"
                placeholder="请选择出生年月"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="7">
            <el-form-item label="农历生日" prop="lunarBirthday">
              <el-date-picker
                v-model="formData.lunarBirthday"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :style="{ width: '100%' }"
                placeholder="请选择农历生日"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="户籍地址" prop="city">
              <el-cascader
                v-model="formData.city"
                :options="area"
                :props="cityProps"
                :style="{ width: '100%' }"
                placeholder="请选择户籍地址"
                clearable
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="详细地址" prop="residenceAddress">
              <el-input
                v-model="formData.residenceAddress"
                placeholder="请输入街道及门牌号"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="7">
            <el-form-item label="民族" prop="nation">
              <el-select
                v-model="formData.nation"
                placeholder="请选择民族"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="dict in dict.type.user_nation"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="婚姻状况" prop="maritalStatus">
              <el-select
                v-model="formData.maritalStatus"
                placeholder="请选择婚姻状况"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="dict in dict.type.user_marriage_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="文化程度" prop="standardCulture">
              <el-select
                v-model="formData.standardCulture"
                placeholder="请选择文化程度"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="dict in dict.type.user_culture_extent"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="7">
            <el-form-item label="职业" prop="occupation">
              <el-select
                v-model="formData.occupation"
                placeholder="请输入职业"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="dict in dict.type.user_occupation"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="退休" prop="isRetire">
              <el-select
                v-model="formData.isRetire"
                placeholder="请选择退休"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="dict in dict.type.user_retire"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="7">
            <el-form-item label="个人特长" prop="personalSpecialty">
              <el-select
                v-model="formData.personalSpecialty"
                placeholder="请选择个人特长"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in personalSpecialtyOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row :gutter="15">
          <el-col :span="7">
            <el-form-item label="性格" prop="isCharacter">
              <el-select
                v-model="formData.isCharacter"
                placeholder="请选择性格"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="dict in dict.type.user_nature"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value + ''"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="爱好" prop="hobby">
              <el-select
                v-model="formData.hobby"
                placeholder="请选择爱好"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="dict in dict.type.user_hobby"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="7">
            <el-form-item label="子女数" prop="quantityChildren">
              <el-input
                v-model="formData.quantityChildren"
                placeholder="请选择子女数"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row :gutter="15">
          <el-col :span="7">
            <el-form-item label="健在" prop="isSurvival">
              <el-select
                v-model="formData.isSurvival"
                placeholder="请选择健在"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="dict in dict.type.user_ok"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="政府救助类型" prop="governmentRescue">
              <el-select
                v-model="formData.governmentRescue"
                placeholder="请选择政府救助类型"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="dict in dict.type.user_bailout_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="主要经济来源" prop="sourceFinance">
              <el-select
                v-model="formData.sourceFinance"
                placeholder="请选择主要经济来源"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="dict in dict.type.user_economy"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="7">
            <el-form-item label="头像" prop="avatar">
              <!-- <el-upload
                ref="avatar"
                :file-list="avatarfileList"
                :action="avatarAction"
                :before-upload="avatarBeforeUpload"
                list-type="picture-card"
                :header="headers"
              >
                <i class="el-icon-plus"></i>
              </el-upload> -->
              <fileUpload
                ref="file-upload"
                :name="avatarfile"
                :value="formData.avatar"
                :limit="1"
                :fileSize="10"
                :fileType="['png', 'jpg', 'jpeg']"
                @input="getFilePath($event)"
              ></fileUpload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item size="large">
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { listUser } from "@/api/system/users";
import {
  listMessage,
  getMessage,
  addMessage,
  updateMessage,
  delMessage,
  getArea,
} from "@/api/cluster/message";
export default {
  components: {},
  props: [],
  name: "dwell",
  dicts: [
    "user_documents_type",
    "user_marriage_type",
    "user_culture_extent",
    "user_occupation",
    "user_retire",
    "user_nature",
    "user_hobby",
    "user_ok",
    "user_bailout_type",
    "user_economy",
    "user_nation",
  ],
  data() {
    return {
      avatarfile: "avatarfile",
      userList: [],
      area: [],
      formData: {
        oldManId: undefined,
        oldManNumber: undefined,
        phone: undefined,
        certificateType: undefined,
        idNumber: undefined,
        dateBirth: null,
        lunarBirthday: null,
        city: [],
        field121: undefined,
        nation: undefined,
        maritalStatus: undefined,
        standardCulture: undefined,
        occupation: undefined,
        isRetire: undefined,
        personalSpecialty: undefined,
        isCharacter: undefined,
        hobby: undefined,
        quantityChildren: undefined,
        isSurvival: undefined,
        governmentRescue: undefined,
        sourceFinance: undefined,
        avatar: null,
        avatars: null,
      },
      rules: {
        oldManId: [
          {
            required: true,
            message: "请选择姓名",
            trigger: "change",
          },
        ],
        oldManNumber: [],
        phone: [],
        certificateType: [
          {
            required: true,
            message: "请选择证件类型",
            trigger: "change",
          },
        ],
        idNumber: [
          {
            required: true,
            message: "请输入证件号码",
            trigger: "blur",
          },
        ],
        dateBirth: [
          {
            required: true,
            message: "请选择出生年月",
            trigger: "change",
          },
        ],
        lunarBirthday: [
          {
            required: true,
            message: "请选择农历生日",
            trigger: "change",
          },
        ],
        city: [
          {
            required: true,
            type: "array",
            message: "请选择户籍地址",
            trigger: "change",
          },
        ],
        field121: [
          {
            required: true,
            message: "请输入街道及门牌号",
            trigger: "blur",
          },
        ],
        nation: [],
        maritalStatus: [],
        standardCulture: [],
        occupation: [],
        isRetire: [],
        personalSpecialty: [],
        isCharacter: [],
        hobby: [],
        quantityChildren: [],
        isSurvival: [],
        governmentRescue: [],
        sourceFinance: [],
      },
      // avatarAction: process.env.VUE_APP_BASE_API +"/system/user/profile/avatar",
      // avatarfileList: [],
      // headers:{
      //   Bearer
      // },

      cityProps: {
        multiple: false,
        value: "id",
        label: "name",
      },
      id: null,
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getUserList();


    this.getArea();
    this.getMessageList();
  },
  mounted() {},
  methods: {
    getMessageList() {
      this.id = this.$route.query.id;
      if (this.id) {
        getMessage(this.id).then((response) => {
          this.formData = response.data;
          this.formData.isRetire=String(response.data.isRetire)
          this.formData.standardCulture=String(response.data.standardCulture)
          this.formData.maritalStatus=String(response.data.maritalStatus)
          this.formData.occupation=String(response.data.occupation)
          this.formData.isCharacter=String(response.data.isCharacter)
          this.formData.isSurvival=String(response.data.isSurvival)
          this.formData.governmentRescue=String(response.data.governmentRescue)
          this.formData.sourceFinance=String(response.data.sourceFinance)
          this.formData.certificateType=String(response.data.certificateType)
          this.formData.city=[response.data.residenceProvince,response.data.residenceCity,response.data.residenceArea]
          // this.formData.avatars=`${process.env.VUE_APP_SERVER_API_URL}${response.data.avatar}`
          this.formData.avatar=response.data.avatar
        });
      }
    },
    getTreeData(data) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined
          delete data[i].children;
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].children);
        }
      }
      return data;
    },

    getArea() {
      getArea().then((res) => {
        this.area = this.getTreeData(res);
      });
    },
    // 获取文件路径
    getFilePath(data) {
      console.log(data);

      this.formData.avatar = data;
      // this.formData.avatar = data;
    },
    userChange(e) {
      console.log(e);
      let item = this.userList.find((item) => {
        if (item.id == e) {
          return item;
        }
      });
      this.formData.oldManId = item.id;
      // this.formData.oldManName=item.name
      this.formData.oldManNumber = "rcdjk" + item.id;
      this.formData.phone = item.phone;
      this.formData.isGender = item.gender;
      console.log(this.formData);
    },
    getUserList() {
      listUser({
        pageNum: 1,
        pageSize: 100000,
      }).then((response) => {
        this.userList = response.rows;
      });
    },
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单

        if (this.formData.city) {
          this.formData.residenceProvince = this.formData.city[0];
          this.formData.residenceCity = this.formData.city[1];
          this.formData.residenceArea = this.formData.city[2];
        }
        if (this.id) {
          updateMessage(this.formData).then((response) => {
            this.$modal.msgSuccess("新增成功");
            this.$router.go(-1);
          });
        } else {
          addMessage(this.formData).then((response) => {
            this.$modal.msgSuccess("新增成功");
            this.$router.go(-1);
          });
        }
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
    getCityOptions() {
      // TODO 发起请求获取数据
      this.cityOptions;
    },
    avatarBeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2;
      if (!isRightSize) {
        this.$message.error("文件大小超过 2MB");
      }
      return isRightSize;
    },
  },
};
</script>
<style scope>
.el-form-item {
  margin-bottom: 5px;
}
.el-upload__tip {
  line-height: 1.2;
}
</style>
